<template>
  <div class="table">
    <a-table
      :dataSource="dataSource"
      :columns="config.columns"
      v-bind="config.table"
      :pagination="config.isPagination ? paginationOptions : false"
      :loading="tableLoading"
      @resizeColumn="handleResizeColumn"
    >
      <!--       默认插槽，使表格的标题文字内容居中显示-->
      <template #headerCell="{ column }">
        <div style="text-align: center">
          {{ column.title }}
        </div>
      </template>

      <!--      由父组件引用时通过插槽传入的自定义渲染内容-->
      <!--      以下为举例说明-->
      <!--      <template #bodyCell="{ column, record }">-->
      <!--        <template v-if="column.title === '类型'">-->
      <!--          <span>{{ record.menuType === "M" ? "目录" : "菜单" }}</span>-->
      <!--        </template>-->
      <!--      </template>-->
      <template #bodyCell="{ column, record }">
        <slot name="bodyCell" :column="column" :record="record"></slot>
        <template v-if="column.title === '操作'">
          <a-space>
            <a-button
              v-has-perm="config.buttons.detail"
              type="primary"
              size="small"
              @click="handleClick('view', record)"
            >
              <icon type="EyeOutlined" />
            </a-button>
            <a-button
              v-has-perm="config.buttons.add"
              size="small"
              @click="handleClick('add', record)"
            >
              <icon type="PlusOutlined" />
            </a-button>
            <a-button
              v-has-perm="config.buttons.edit"
              size="small"
              type="dashed"
              @click="handleClick('edit', record)"
            >
              <icon type="EditOutlined" />
            </a-button>
            <a-button
              v-has-perm="[config.buttons.delete]"
              type="dashed"
              danger
              size="small"
              @click="handleClick('delete', record)"
            >
              <icon type="CloseCircleOutlined" />
            </a-button>
            <a-button
              v-has-perm="[config.buttons.role]"
              size="small"
              @click="handleClick('role', record)"
            >
              <icon type="ShareAltOutlined" />
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <!--    <a-pagination-->
    <!--      v-if="config.isPagination"-->
    <!--      v-model:current="current"-->
    <!--      v-model:page-size="pageSize"-->
    <!--      :total="total"-->
    <!--      :show-total="(total) => `共 ${total} 条数据`"-->
    <!--      show-size-changer-->
    <!--      :pageSizeOptions="pageSizeOptions"-->
    <!--      @change="onPageChange"-->
    <!--    >-->
    <!--      <template #buildOptionText="pageSizeOptions">-->
    <!--        <span v-if="pageSizeOptions.value !== '20'"-->
    <!--          >{{ pageSizeOptions.value }}条/页</span-->
    <!--        >-->
    <!--        <span v-else>全部</span>-->
    <!--      </template>-->
    <!--    </a-pagination>-->
  </div>
</template>

<script setup>
import icon from "@utils/icon";
import lodash from "lodash";

const { config } = defineProps({
  config: {
    url: {
      required: true,
    }, // 接口请求函数，参数为请求参数
    columns: {
      type: Array,
      required: true,
    }, // 表格列配置项，参考 https://ant.design/components/table-cn/#Column
    params: {
      type: Object,
    }, // 请求参数
    table: {
      type: Object,
    }, // 表格配置项，参考 https://ant.design/components/table-cn/#API
    isPagination: true, // 是否开启分页
    dataPath: {
      type: String,
    }, // 接口返回数据路径，需要配置response之后的路径（实际路径为response.monitor.xxx，配置路径为data.xxx）
    buttons: {
      type: Object,
    }, // 需要的表格操作按钮
  },
});

// 加载状态、表格数据
const tableLoading = ref(false);
const dataSource = ref([]);
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const pageSizeOptions = ref(["1", "5", "10", "20"]);

onMounted(() => {
  loadData();
});

// 加载数据，刷新数据
const loadData = async () => {
  tableLoading.value = true;
  try {
    const response = await config.url(
      config.isPagination
        ? { current: current.value, size: pageSize.value, ...config.params }
        : { ...config.params },
    );
    if (response.code === 200) {
      dataSource.value = config.dataPath
        ? lodash.get(response, config.dataPath)
        : response.data;
      current.value = response.data.current;
      pageSize.value = response.data.size;
      total.value = response.data.total;
      tableLoading.value = false;
    }
  } catch (error) {
    tableLoading.value = false;
    console.log(error);
  }
};

// 表格列宽可拉伸处理函数
const handleResizeColumn = (w, col) => {
  col.width = w;
};

const onPageChange = (page, size) => {
  current.value = page;
  pageSize.value = size;
  loadData();
};
const paginationOptions = reactive({
  position: ["bottomCenter"],
  showSizeChanger: true,
  pageSizeOptions: pageSizeOptions,
  pageSize: pageSize,
  current: current,
  total: total,
  onChange: onPageChange,
  buildOptionText: (pageSizeOptions) => {
    return pageSizeOptions.value !== "20"
      ? `${pageSizeOptions.value}条/页`
      : "全部";
  },
  showTotal: (total) => `共 ${total} 条数据`,
});

const emit = defineEmits(["view", "add", "edit", "delete", "role"]);

const handleClick = (type, record) => {
  emit(type, record);
};

defineExpose({
  loadData,
});
</script>

<style scoped lang="scss"></style>
